import React, { Component } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space, message } from 'antd';
import Captcha from '../../components/Captcha';

// 引入高阶组件强化函数HOC withRouter
// 注意: 只有通过路由跳转的组件,它的props属性中才有路由的三个参数对象 history,location match
// 如果需要的话,则需要使用类组件使用 WithRouter  函数组件 使用 三个hooks useHistory useLocation useParams
import { withRouter } from 'react-router-dom'
// 引入封装后的axios 
import axios from '@/http/http';
// 引入请求地址对象
import url from '@/config/url'
// 引入 js-cookie
import Cookies from 'js-cookie'
class Normallogin extends Component {

    state = {
        key: ''  // 验证码子组件传给当前组件的key,是验证码的唯一标识
    }
    render() {
        return (
            <div>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    >
                        <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                            size='large'
                        />
                    </Form.Item>
                    <Space>
                        <Form.Item
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="text"
                                placeholder="验证码"
                                size='large'
                            />
                        </Form.Item>
                        <Form.Item>
                            {/* 验证码组件 */}
                            <Captcha getKey={this.getKey} w={120}></Captcha>
                        </Form.Item>
                    </Space>

                    <Form.Item>
                        <Button type="primary" size='large' block htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    };
    // 该事件时子传父
    getKey = (key) => {
        // console.log(key)  // 验证码标识符
        this.setState({
            key: key
        })
    }
    // 提交事件
    onFinish = (values) => {
        console.log('Received values of form: ', values);
        // 给 values 参数对象添加key 属性
        values.key = this.state.key
        console.log(values)
        //axios发起post 请求
        axios.post(url.pwdLogin, values).then(res => {
            console.log(res)
            if (res.data.errNo === 0) {
                // 登录成功
                //01: 做一次提示 adnt
                //02: 将jwt(jsonwebtoken==token) 存在本地
                //03: 将用户的权限菜单 数组也存在localStortage
                //04: 跳转到首页
                message.success('登录成功', 1)
                // 将用户登录成功后的jwt(jsonwebtoken==token) 存到cookie中
                Cookies.set('jwt', res.data.context.jwt)
                localStorage.setItem('acl', JSON.stringify(res.data.context.acl))
                this.props.history.push('/dashboard')
            } else {
                //登陆失败
                message.error(res.data.errText, 2)
            }

        }).catch(e => { })



    };
}

export default withRouter(Normallogin);
